<template>
  <div class="page6">
    <div class="contant fadeInDown">
      <!-- <p>漫游在璀璨应用星群之中，也找到了关于您的点点滴滴，您最常用的应用是<span class="yellowfont">{{ data.useOftenAppList }}。</span></p>
      <p></p>
      <p>让我们追随时光的脚印，看看还有哪些发现！</p> -->
      <p>漫游在璀璨应用星群之中，也找到了关于您的点点滴滴，让我们追随时光的脚印，看看还有哪些发现！</p>
    </div>
    <div class="img1">
      <!-- animate__backInUp -->
      <img class="ball" src="../../assets/images/bill2022/10y/ball.png" alt="">
      <div class="airship">
        <img class="animate__backInUp " src="../../assets/images/bill2022/10y/btm_r.png">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => { },
    },
  },
  components: {
  },
  // 定义属性
  data () {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    //    console.log(this.data,'data')
  },
}
</script>
<style lang='less' scoped>
.page6 {
  display: flex;
  align-items: center;
  flex-direction: column;
  .contant {
    margin-top: 3rem;
    width: 38.5rem;
    text-align: left;
    font-size: 2.1rem;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 400;
    color: #fefefe;
    line-height: 3.2rem;

    .yellowfont {
      color: #fbd858;
      font-weight: 600;
      font-size: 2.25rem;
      padding-right: 0.4rem;
    }
  }

  .img1 {
    width: 100%;
    position: absolute;
    bottom: -15rem;
    height: 47.6875rem;
    background: url(../../assets/images/bill2022/10y/btm.png) no-repeat;
    background-size: 100% 100%;
    position: relative;

    .ball {
      width: 23.375rem;
      position: absolute;
      bottom: -5rem;
      left: -5rem;
    }
    .airship {
      position: absolute;
      bottom: 0rem;
      right: 2.5rem;
      animation: slideUp 1s ease-in-out;
      -webkit-animation: slideUp 1s ease-in-out;
      -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
      -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
      -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
      animation-iteration-count: infinite;
      animation-direction: alternate;

      img {
        width: 24.75rem;
      }
    }
    @keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }

      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-webkit-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }

    @-moz-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-o-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-ms-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
  }
}
.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__backInUp {
  animation: backInUp 2s ease-in-out;
  animation-iteration-count: 1;
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateX(2000px) scale(0.4);
    transform: translatex(2000px) scale(0.4);
    opacity: 0.7;
  }

  to {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
</style>